<template>
  <section id="corporation">
    <section class="btn-list" ref="btnList">
      <a-button @click="visibleAddAwards=true">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector_2"
                  d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_3" d="M8 5.33325V10.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="Vector_4" d="M5.3335 8H10.6668" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
        <p>添加获奖荣誉</p>
      </a-button>
      <a-button @click="handleAddUser">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector_2"
                  d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_3" d="M8 5.33325V10.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="Vector_4" d="M5.3335 8H10.6668" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
        <p>添加人员介绍</p>
      </a-button>
      <a-button @click="handleAddQrcode">
        <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g id="Frame">
            <path id="Vector_2"
                  d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
                  stroke="#98A6AD" stroke-linejoin="round"/>
            <path id="Vector_3" d="M8 5.33325V10.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path id="Vector_4" d="M5.3335 8H10.6668" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
          </g>
        </svg>
        <p>添加社长二维码</p>
      </a-button>
    </section>
    <section class="scroll-box">
      <section class="community-introduction-list list">
        <h1>社团介绍</h1>
        <a-table
            :data-source="introduceData"
            :loading="isLoading"
            :pagination="false"
            :rowKey="(record, index) => record.id"
            :class="isIntroduceDataEmpty ? '' :'empty'"
        >
          <a-table-column key="community_introduce" title="社团介绍内容" data-index="community_introduce" align="center"
                          width="300px">
            <template #default="{ record }">
            <span
                style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 690px;display: block">{{
                record.community_introduce
              }}</span>
            </template>
          </a-table-column>
          <a-table-column key="introduce_image" title="图片" data-index="introduce_image" align="center" width="300px">
            <template #default="{ record }">
              <a-image
                  :width="200"
                  :height="150"
                  :preview="true"
                  :src="record.introduce_image"
                  fallback=""

              >
                <template #placeholder>
                  <section class="loading">
                    <LoadingOutlined/>
                  </section>
                </template>
              </a-image>
              <section style="width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                {{ record.introduce_image }}
              </section>
            </template>
          </a-table-column>
          <a-table-column key="introduce_update_time" title="更新时间" data-index="introduce_update_time" align="center"
                          width="135px"/>
          <a-table-column key="operation" title="操作" data-index="operation" align="center" width="135px">
            <template #default="{ record }">
              <section class="operation" ref="operation">
                <span @click="handleEditCommunity(record)" style="color: #3C50E1">编辑</span>
              </section>
            </template>
          </a-table-column>
        </a-table>
      </section>
      <section class="awards-list list">
        <h1>获奖荣誉</h1>
        <a-table
            :data-source="awardsData"
            :loading="isLoading"
            :pagination="false"
            :rowKey="(record, index) => record.id"
            :class="isAwardsDataEmpty ? '' :'empty'"
        >
          <a-table-column key="award_username" title="获奖人" data-index="award_username" align="center"
                          width="48"/>
          <a-table-column key="award_content" title="获奖内容" data-index="award_content" align="center"
                          width="345px">
            <template #default="{ record }">
              <section style="width: 275px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                {{ record.award_content }}
              </section>
            </template>
          </a-table-column>
          <a-table-column key="award_img" title="图片" data-index="award_img" align="center"
                          width="420px">
            <template #default="{ record }">
              <a-image
                  :width="200"
                  :height="150"
                  :preview="true"
                  :src="record.award_img"
                  fallback=""

              >
                <template #placeholder>
                  <section class="loading">
                    <LoadingOutlined/>
                  </section>
                </template>
              </a-image>
              <section style="width: 420px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                {{ record.award_img }}
              </section>
            </template>
          </a-table-column>
          <a-table-column key="update_time" title="更新时间" data-index="update_time" align="center"
                          width="135px"/>
          <a-table-column key="operation" title="操作" data-index="operation" align="center" width="135px">
            <template #default="{ record }">
              <section class="operation" ref="operation">
                <span @click="handleEditAwardsData(record)">编辑</span>
                <span @click="handleDeteleAwardsData(record)">删除</span>
              </section>
            </template>
          </a-table-column>
        </a-table>
      </section>
      <section class="user-list list">
        <h1>人员介绍</h1>
        <a-table
            :data-source="userData"
            :loading="isLoading"
            :pagination="false"
            :rowKey="(record, index) => record.id"
            :class="isUserDataEmpty ? '' :'empty'"
        >
          <a-table-column key="grade" title="年级" data-index="grade" align="center"
                          width="135px"/>
          <a-table-column key="username" title="名字" data-index="username" align="center"
                          width="50px"/>
          <a-table-column key="image" title="图片" data-index="image" align="center"
                          width="250px">
            <template #default="{ record }">
              <a-image
                  :width="200"
                  :height="150"
                  :preview="true"
                  :src="record.image"
                  fallback=""

              >
                <template #placeholder>
                  <section class="loading">
                    <LoadingOutlined/>
                  </section>
                </template>
              </a-image>
              <section style="width: 410px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                {{ record.image }}
              </section>
            </template>
          </a-table-column>
          <a-table-column key="introduce" title="专业" data-index="introduce" align="center"
                          width="300px"/>
          <a-table-column key="login_date" title="更新时间" data-index="login_date" align="center"
                          width="135px"/>
          <a-table-column key="operation" title="操作" data-index="operation" align="center" width="135px">
            <template #default="{ record }">
              <section class="operation" ref="operation">
                <span @click="handleEditUser(record)">编辑</span>
                <span @click="handleDeteleUserData(record)">删除</span>
              </section>
            </template>
          </a-table-column>
        </a-table>
      </section>
      <section class="president-qrcode-list list">
        <h1>社长二维码</h1>
        <a-table
            :data-source="qrcodeData"
            :loading="isLoading"
            :pagination="false"
            :rowKey="(record, index) => record.id"
            :class="isQrcodeDataEmpty ? '' :'empty'"
        >
          <a-table-column key="grade" title="年级" data-index="grade" align="center" width="200px"/>
          <a-table-column key="president_qrcode" title="二维码图片地址" data-index="president_qrcode" align="center"
                          width="650px">
            <template #default="{ record }">
              <a-image
                  :width="200"
                  :height="150"
                  :preview="true"
                  :src="record.president_qrcode"
                  fallback=""

              >
                <template #placeholder>
                  <section class="loading">
                    <LoadingOutlined/>
                  </section>
                </template>
              </a-image>
              <section style="width: 600px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
                {{ record.president_qrcode }}
              </section>
            </template>
          </a-table-column>
          <a-table-column key="qrcode_update_time" title="更新时间" data-index="qrcode_update_time" align="center"
                          width="135px"/>
          <a-table-column key="operation" title="操作" data-index="operation" align="center" width="135px">
            <template #default="{ record }">
              <section class="operation" ref="operation">
                <span @click="handleEditQrcode(record)">编辑</span>
                <span @click="handleDeteleQrcodeData(record)">删除</span>
              </section>
            </template>
          </a-table-column>
        </a-table>
      </section>
    </section>

    <!--编辑社团介绍-->
    <a-modal v-model:visible="visibleEditCommunity" :footer="null" :getContainer="$refs.btnList" class="edit-model">
      <section class="edit-model-header">
        <h1>编辑社团介绍</h1>
        <h2>Edit Club profile</h2>
      </section>
      <section class="edit-model-body">
        <a-textarea v-model:value="editCommunity.content" placeholder="社团介绍内容" height="150px"/>
        <a-upload-dragger
            v-model:fileList="fileList"
            name="img"
            :data="{content:editCommunity.content}"
            action="http://119.23.46.241:11900/api/v1/admin/introduce"
            method="post"
            :headers="uploadHeader"
            @change="handleCommunityChange"
            accept=".jpg,.jpeg,.png"
        >
          <p>点击上传图片</p>
        </a-upload-dragger>
      </section>
      <section class="edit-model-footer">
        <a-button @click="visibleEditCommunity=false">取消</a-button>
        <a-button @click="handleKeepCommunity" :loading="load">保存</a-button>
      </section>
    </a-modal>
    <!--添加获奖荣誉-->
    <a-modal v-model:visible="visibleAddAwards" :footer="null" :getContainer="$refs.btnList" class="edit-model">
      <section class="edit-model-header">
        <h1>添加获奖荣誉</h1>
        <h2>aDD Award</h2>
      </section>
      <section class="edit-model-body">
        <a-input v-model:value="addAwards.username" placeholder="获奖人" height="150px"/>
        <a-textarea v-model:value="addAwards.content" placeholder="获奖内容" height="150px"/>
        <a-upload-dragger
            v-model:fileList="fileList"
            name="img"
            :data="addAwards"
            action="http://119.23.46.241:11900/api/v1/award"
            method="post"
            :headers="uploadHeader"
            @change="handleAddAwardsChange"
            accept=".jpg,.jpeg,.png"
        >
          <p>点击上传图片</p>
        </a-upload-dragger>
      </section>
      <section class="edit-model-footer">
        <a-button @click="visibleAddAwards=false">取消</a-button>
        <a-button>确定</a-button>
      </section>
    </a-modal>
    <!--编辑获奖荣誉-->
    <a-modal v-model:visible="visibleEditAwards" :footer="null" :getContainer="$refs.btnList" class="edit-model">
      <section class="edit-model-header">
        <h1>编辑获奖荣誉</h1>
        <h2>Editor Award</h2>
      </section>
      <section class="edit-model-body">
        <a-input v-model:value="editAwards.username" placeholder="获奖人"/>
        <a-textarea v-model:value="editAwards.content" placeholder="获奖内容"/>
        <a-upload-dragger
            v-model:fileList="fileList"
            name="img"
            :data="editAwards"
            action="http://119.23.46.241:11900/api/v1/admin/award"
            method="post"
            :headers="uploadHeader"
            @change="handleAwardsChange"
            accept=".jpg,.jpeg,.png"
        >
          <p>点击上传图片</p>
        </a-upload-dragger>
      </section>
      <section class="edit-model-footer">
        <a-button @click="visibleEditAwards = false">取消</a-button>
        <a-button @click="handleKeepAwardsData" :loading="load">保存</a-button>
      </section>
    </a-modal>
    <!--删除获奖荣誉-->
    <a-modal v-model:visible="visibleDeleteAwards" :footer="null" :getContainer="$refs.btnList" width="374px">
      <section style="text-align: center">
        <h2 class="modal-title">是否删除此获奖荣誉</h2>
        <p class="modal-content">点击确认后，不得撤销此操作</p>
      </section>
      <section class="modal-button">
        <a-button type="primary" @click="visibleDeleteAwards=false">取消</a-button>
        <a-button type="primary" @click="handleConfirmDeteleAwards" :loading="load">确定</a-button>
      </section>
    </a-modal>
    <!--编辑人员介绍-->
    <a-modal v-model:visible="visibleEditUser" :footer="null" :getContainer="$refs.btnList" class="edit-model">
      <section class="edit-model-header">
        <h1>编辑人员介绍</h1>
        <h2>Editor personnel</h2>
      </section>
      <section class="edit-model-body">
        <a-input v-model:value="editUser.introduce" placeholder="专业"/>
        <a-upload-dragger
            v-model:fileList="fileList"
            name="img"
            :data="editUser"
            action="http://119.23.46.241:11900/api/v1/admin/leader"
            method="post"
            :headers="uploadHeader"
            @change="handleUserChange"
            accept=".jpg,.jpeg,.png"
        >
          <p>点击上传图片</p>
        </a-upload-dragger>
      </section>
      <section class="edit-model-footer">
        <a-button @click="visibleEditUser = false">取消</a-button>
        <a-button @click="handleKeepUserData" :loading="load">保存</a-button>
      </section>
    </a-modal>
    <!--添加人员介绍-->
    <a-modal v-model:visible="visibleAddUser" :footer="null" :getContainer="$refs.btnList" class="edit-model">
      <section class="edit-model-header">
        <h1>添加人员介绍</h1>
        <h2>add personnel</h2>
      </section>
      <section class="edit-model-body">
        <a-select
            v-model:value="addUser.leader_id"
            label-in-value
            style="width: 268px"
            :options="addUser.leaderArr"
        >
        </a-select>
        <a-input v-model:value="addUser.introduce" placeholder="专业"/>
        <a-upload-dragger
            v-model:fileList="fileList"
            name="img"
            :data="{leader_id:addUser.leader_id.value,introduce:addUser.introduce}"
            action="http://119.23.46.241:11900/api/v1/leader"
            method="post"
            :headers="uploadHeader"
            @change="handleAddUserData"
            accept=".jpg,.jpeg,.png"
        >
          <p>点击上传图片</p>
        </a-upload-dragger>
      </section>
      <section class="edit-model-footer">
        <a-button @click="visibleAddUser = false">取消</a-button>
        <a-button @click="handleAddUserData" :loading="load">确定</a-button>
      </section>
    </a-modal>
    <!--删除人员介绍-->
    <a-modal v-model:visible="visibleDeleteUser" :footer="null" :getContainer="$refs.btnList" width="374px">
      <section style="text-align: center">
        <h2 class="modal-title">是否删除此人员介绍</h2>
        <p class="modal-content">点击确认后，不得撤销此操作</p>
      </section>
      <section class="modal-button">
        <a-button type="primary" @click="visibleDeleteUser=false">取消</a-button>
        <a-button type="primary" @click="handleConfirmDeteleUser" :loading="load">确定</a-button>
      </section>
    </a-modal>
    <!--添加社长二维码-->
    <a-modal v-model:visible="visibleAddQrcode" :footer="null" :getContainer="$refs.btnList" class="edit-model">
      <section class="edit-model-header">
        <h1>添加社长二维码</h1>
        <h2>add president qrcode</h2>
      </section>
      <section class="edit-model-body">
        <a-select
            v-model:value="addQrcode.grade_id"
            label-in-value
            style="width: 268px"
            :options="addQrcode.gradeArr"
        >
        </a-select>
        <a-upload-dragger
            v-model:fileList="fileList"
            name="img"
            :data="{grade_id:addQrcode.grade_id.value }"
            action="http://119.23.46.241:11900/api/v1/presidentqrcode"
            method="post"
            :headers="uploadHeader"
            @change="handleAddQrcodeData"
            accept=".jpg,.jpeg,.png"
        >
          <p>点击上传图片</p>
        </a-upload-dragger>
      </section>
      <section class="edit-model-footer">
        <a-button @click="visibleAddQrcode=false">取消</a-button>
        <a-button @click="handleAddUserData" :loading="load">确定</a-button>
      </section>
    </a-modal>
    <!--编辑社长二维码-->
    <a-modal v-model:visible="visibleEditQrcode" :footer="null" :getContainer="$refs.btnList" class="edit-model">
      <section class="edit-model-header">
        <h1>编辑社长二维码</h1>
        <h2>Editor president qrcode</h2>
      </section>
      <section class="edit-model-body">
        <a-upload-dragger
            v-model:fileList="fileList"
            name="img"
            :data="editQrcode"
            action="http://119.23.46.241:11900/api/v1/admin/presidentqrcode"
            method="post"
            :headers="uploadHeader"
            @change="handleQrcodeChange"
            accept=".jpg,.jpeg,.png"
        >
          <p>点击上传图片</p>
        </a-upload-dragger>
      </section>
      <section class="edit-model-footer">
        <a-button @click="visibleEditQrcode=false">取消</a-button>
        <a-button @click="handleKeepUserData" :loading="load">保存</a-button>
      </section>
    </a-modal>
    <!--删除社长二维码-->
    <a-modal v-model:visible="visibleDeleteQrcode" :footer="null" :getContainer="$refs.btnList" width="374px">
      <section style="text-align: center">
        <h2 class="modal-title">是否删除此社长二维码</h2>
        <p class="modal-content">点击确认后，不得撤销此操作</p>
      </section>
      <section class="modal-button">
        <a-button type="primary" @click="visibleDeleteQrcode=false">取消</a-button>
        <a-button type="primary" @click="handleConfirmDeteleQrcode" :loading="load">确定</a-button>
      </section>
    </a-modal>
  </section>
</template>
<script>
import $store from "store/index"
import {defineComponent, getCurrentInstance, ref, reactive, onMounted} from 'vue'
import {LoadingOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";

export default defineComponent({
  name: "corporation",
  setup() {
    const {proxy} = getCurrentInstance()
    let introduceData = ref([])
    let qrcodeData = ref([])
    let awardsData = ref([])
    let userData = ref([])
    let fileList = ref([])
    let uploadHeader = ref({})
    let isLoading = ref(true)
    let isIntroduceDataEmpty = ref(false)
    let isAwardsDataEmpty = ref(false)
    let isUserDataEmpty = ref(false)
    let isQrcodeDataEmpty = ref(false)
    let visibleEditCommunity = ref(false)
    let visibleEditAwards = ref(false)
    let visibleDeleteAwards = ref(false)
    let visibleAddAwards = ref(false)
    let visibleEditUser = ref(false)
    let visibleDeleteUser = ref(false)
    let visibleDeleteQrcode = ref(false)
    let visibleEditQrcode = ref(false)
    let visibleAddUser = ref(false)
    let visibleAddQrcode = ref(false)
    let load = ref(false)
    let delId = ref('')
    let editCommunity = reactive({
      content: ''
    })
    let editAwards = reactive({
      content: '',
      username: '',
      id: ''
    })
    let editUser = reactive({
      introduce: '',
      id: ''
    })
    let editQrcode = reactive({
      id: ''
    })
    let addAwards = reactive({
      username: '',
      content: '',
    })
    let addUser = reactive({
      leader_id: {label: "请选择人员", value: 0},
      introduce: '',
      leaderArr: []
    })
    let addQrcode = reactive({
      grade_id: {value: 0, label: "请选择年级"},
      gradeArr: []
    })

    onMounted(() => {
      proxy.$request(proxy.$getRoute(81).route_method, proxy.$getRoute(81).route_url, {}).then(res => {
        introduceData.value.push(res.data.introduce)
        qrcodeData.value = res.data.qrcode
        isLoading.value = false
        if (!introduceData.value.length) isIntroduceDataEmpty.value = true
        if (!qrcodeData.value.length) isQrcodeDataEmpty.value = true
      })
      proxy.$request(proxy.$getRoute(82).route_method, proxy.$getRoute(82).route_url, {}).then(res => {
        awardsData.value = res.data
        isLoading.value = false
        if (!awardsData.value.length) isAwardsDataEmpty.value = true
      })
      proxy.$request(proxy.$getRoute(83).route_method, proxy.$getRoute(83).route_url, {}).then(res => {
        userData.value = res.data
        isLoading.value = false
        if (!userData.value.length) isUserDataEmpty.value = true
      })

      let token = $store.state.token
      uploadHeader.value = {
        Authorization: token
      }
    })

    const handleEditCommunity = (record) => {
      editCommunity.content = record.community_introduce
      editCommunity.img = record.introduce_image
      visibleEditCommunity.value = true
    }
    const handleCommunityChange = (file) => {
      load.value = true
      if (file.fileList[0].status == "done") {
        introduceData.value = []
        load.value = false
        isLoading.value = true
        isIntroduceDataEmpty.value = false
        proxy.$request(proxy.$getRoute(81).route_method, proxy.$getRoute(81).route_url, {}).then(res => {
          introduceData.value.push(res.data.introduce)
          isLoading.value = false
          if (!introduceData.value.length) isIntroduceDataEmpty.value = true
          visibleEditCommunity.value = false
          message.success('保存成功')
          editCommunity.content = ''
        })
      }
    }
    const handleKeepCommunity = () => {
      if (editCommunity.content.trim().length == 0) {
        message.error('请输入社团介绍内容')
      } else {
        load.value = true
        proxy.$request(proxy.$getRoute(84).route_method, proxy.$getRoute(84).route_url, {
          content: editCommunity.content
        }).then(res => {
          introduceData.value = []
          isLoading.value = true
          load.value = false
          visibleEditCommunity.value = false
          message.success('保存成功')
          proxy.$request(proxy.$getRoute(81).route_method, proxy.$getRoute(81).route_url, {}).then(res => {
            introduceData.value.push(res.data.introduce)
            isLoading.value = false
            if (!introduceData.value.length) isIntroduceDataEmpty.value = true
          })
        })
      }
    }
    const handleEditAwardsData = (record) => {
      editAwards.id = record.id
      editAwards.username = record.award_username
      editAwards.content = record.award_content
      visibleEditAwards.value = true
    }
    const handleAwardsChange = (file) => {
      load.value = true
      if (file.fileList[0].status == "done") {
        awardsData.value = []
        load.value = false
        isLoading.value = true
        proxy.$request(proxy.$getRoute(82).route_method, proxy.$getRoute(82).route_url, {}).then(res => {
          awardsData.value = res.data
          isLoading.value = false
          if (!awardsData.value.length) isAwardsDataEmpty.value = true
          visibleEditAwards.value = false
          message.success('保存成功')
        })
      }
    }
    const handleKeepAwardsData = () => {
      if (editAwards.content.trim().length == 0) {
        message.error('请输入获奖内容')
      } else {
        load.value = true
        proxy.$request(proxy.$getRoute(86).route_method, proxy.$getRoute(86).route_url, {
          id: editAwards.id,
          content: editAwards.content,
          username: editAwards.username,
        }).then(res => {
          awardsData.value = []
          isLoading.value = true
          load.value = false
          visibleEditAwards.value = false
          message.success('保存成功')
          proxy.$request(proxy.$getRoute(82).route_method, proxy.$getRoute(82).route_url, {}).then(res => {
            awardsData.value = res.data
            isLoading.value = false
            if (!awardsData.value.length) isAwardsDataEmpty.value = true
          })
        })
      }
    }
    const handleDeteleAwardsData = (record) => {
      delId.value = record.id
      visibleDeleteAwards.value = true
    }
    const handleConfirmDeteleAwards = () => {
      load.value = true
      proxy.$request(proxy.$getRoute(89).route_method, proxy.$getRoute(89).route_url, {
        id: delId.value
      }).then(res => {
        awardsData.value = []
        proxy.$request(proxy.$getRoute(82).route_method, proxy.$getRoute(82).route_url, {}).then(res => {
          load.value = false
          message.success('删除成功')
          awardsData.value = res.data
          isLoading.value = false
          if (!awardsData.value.length) isAwardsDataEmpty.value = true
          visibleDeleteAwards.value = false
        })
      })
    }
    const handleEditUser = (record) => {
      editUser.introduce = record.introduce
      editUser.id = record.id
      visibleEditUser.value = true
    }
    const handleUserChange = (file) => {
      load.value = true
      if (file.fileList[0].status == "done") {
        userData.value = []
        load.value = false
        isLoading.value = true
        proxy.$request(proxy.$getRoute(83).route_method, proxy.$getRoute(83).route_url, {}).then(res => {
          userData.value = res.data
          isLoading.value = false
          if (!userData.value.length) isUserDataEmpty.value = true
          visibleEditUser.value = false
          message.success('保存成功')
        })
      }
    }
    const handleKeepUserData = () => {
      load.value = true
      proxy.$request(proxy.$getRoute(87).route_method, proxy.$getRoute(87).route_url, {
        id: editUser.id,
        introduce: editUser.introduce
      }).then(res => {
        userData.value = []
        isLoading.value = true
        proxy.$request(proxy.$getRoute(83).route_method, proxy.$getRoute(83).route_url, {}).then(res => {
          userData.value = res.data
          isLoading.value = false
          load.value = false
          if (!userData.value.length) isUserDataEmpty.value = true
          visibleEditUser.value = false
          message.success('保存成功')
        })
      })
    }
    const handleDeteleUserData = (record) => {
      delId.value = record.id
      visibleDeleteUser.value = true
    }
    const handleConfirmDeteleUser = () => {
      load.value = true
      proxy.$request(proxy.$getRoute(90).route_method, proxy.$getRoute(90).route_url, {
        id: delId.value
      }).then(res => {
        userData.value = []
        proxy.$request(proxy.$getRoute(83).route_method, proxy.$getRoute(83).route_url, {}).then(res => {
          load.value = false
          message.success('删除成功')
          userData.value = res.data
          isLoading.value = false
          if (!userData.value.length) isUserDataEmpty.value = true
          visibleDeleteUser.value = false
        })
      })
    }
    const handleEditQrcode = (record) => {
      editQrcode.id = record.id
      visibleEditQrcode.value = true
    }
    const handleDeteleQrcodeData = (record) => {
      delId.value = record.id
      visibleDeleteQrcode.value = true
    }
    const handleConfirmDeteleQrcode = () => {
      load.value = true
      proxy.$request(proxy.$getRoute(88).route_method, proxy.$getRoute(88).route_url, {
        id: delId.value
      }).then(res => {
        qrcodeData.value = []
        proxy.$request(proxy.$getRoute(81).route_method, proxy.$getRoute(81).route_url, {}).then(res => {
          qrcodeData.value = res.data.qrcode
          load.value = false
          message.success('删除成功')
          isLoading.value = false
          if (!qrcodeData.value.length) isQrcodeDataEmpty.value = true
          visibleDeleteQrcode.value = false
        })
      })
    }
    const handleQrcodeChange = (file) => {
      load.value = true
      if (file.fileList[0].status == "done") {
        qrcodeData.value = []
        load.value = false
        isLoading.value = true
        proxy.$request(proxy.$getRoute(81).route_method, proxy.$getRoute(81).route_url, {}).then(res => {
          qrcodeData.value = res.data.qrcode
          isLoading.value = false
          if (!qrcodeData.value.length) isQrcodeDataEmpty.value = true
          visibleEditQrcode.value = false
          message.success('保存成功')
        })
      }
    }
    const handleAddAwardsChange = (file) => {
      load.value = true
      if (file.fileList[0].status == "done") {
        awardsData.value = []
        load.value = false
        isLoading.value = true
        proxy.$request(proxy.$getRoute(82).route_method, proxy.$getRoute(82).route_url, {}).then(res => {
          awardsData.value = res.data
          isLoading.value = false
          if (!awardsData.value.length) isAwardsDataEmpty.value = true
          visibleAddAwards.value = false
          addAwards.username = ''
          addAwards.content = ''
          message.success('添加成功')
        })
      }
    }
    const handleAddUser = () => {
      proxy.$request(proxy.$getRoute(94).route_method, proxy.$getRoute(94).route_url, {}).then(res => {
        addUser.leaderArr = res.data
        visibleAddUser.value = true
      })
    }
    const handleAddUserData = (file) => {
      load.value = true
      if (file.fileList[0].status == "done") {
        userData.value = []
        load.value = false
        isLoading.value = true
        proxy.$request(proxy.$getRoute(83).route_method, proxy.$getRoute(83).route_url, {}).then(res => {
          userData.value = res.data
          isLoading.value = false
          visibleAddUser.value = false
          addUser.introduce = ''
          addUser.leader_id = {label: "请选择人员", value: 0}
          message.success('添加成功')
        })
      }
    }
    const handleAddQrcode = () => {
      proxy.$request(proxy.$getRoute(95).route_method, proxy.$getRoute(95).route_url, {}).then(res => {
        addQrcode.gradeArr = res.data
        visibleAddQrcode.value = true
      })
    }
    const handleAddQrcodeData = (file) => {
      load.value = true
      if (file.fileList[0].status == "done") {
        qrcodeData.value = []
        load.value = false
        isLoading.value = true
        proxy.$request(proxy.$getRoute(81).route_method, proxy.$getRoute(81).route_url, {}).then(res => {
          qrcodeData.value = res.data.qrcode
          load.value = false
          message.success('删除成功')
          isLoading.value = false
          if (!qrcodeData.value.length) isQrcodeDataEmpty.value = true
          visibleAddQrcode.value = false
          addUser.leader_id = {label: "请选择年级", value: 0}
          message.success('添加成功')
        })
      }
    }

    return {
      isLoading,
      introduceData,
      qrcodeData,
      awardsData,
      userData,
      uploadHeader,
      fileList,
      isIntroduceDataEmpty,
      isAwardsDataEmpty,
      isUserDataEmpty,
      isQrcodeDataEmpty,
      LoadingOutlined,
      editCommunity,
      editAwards,
      editUser,
      editQrcode,
      addAwards,
      addUser,
      addQrcode,
      load,
      visibleEditCommunity,
      visibleEditAwards,
      visibleDeleteAwards,
      visibleAddAwards,
      visibleEditUser,
      visibleAddUser,
      visibleDeleteUser,
      visibleEditQrcode,
      visibleAddQrcode,
      visibleDeleteQrcode,
      handleAddUser,
      handleEditCommunity,
      handleKeepCommunity,
      handleEditAwardsData,
      handleCommunityChange,
      handleAwardsChange,
      handleKeepAwardsData,
      handleDeteleAwardsData,
      handleConfirmDeteleAwards,
      handleEditUser,
      handleUserChange,
      handleKeepUserData,
      handleDeteleUserData,
      handleConfirmDeteleUser,
      handleEditQrcode,
      handleDeteleQrcodeData,
      handleConfirmDeteleQrcode,
      handleQrcodeChange,
      handleAddAwardsChange,
      handleAddUserData,
      handleAddQrcodeData,
      handleAddQrcode,
    }
  },
  components: {
    LoadingOutlined,
  },
})
</script>

<style lang="less">
@selectColor: #6777EF;
#corporation {
  .btn-list {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
  }

  .btn-list > button {
    display: flex;
    align-items: center;
    width: 141px;
    height: 52px;
    border-radius: 6px;
    border: none;
    background: #fff;
    box-shadow: none;
  }

  .btn-list > button:hover p {
    color: @selectColor;
  }

  .btn-list > button:hover path {
    stroke: @selectColor;
  }

  .btn-list > button:nth-child(3) {
    width: 160px;
  }

  .btn-list > button p {
    margin: 0 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 20px;
    letter-spacing: 0.5px;
  }

  .list {
    margin-bottom: 50px;
    border-radius: 8px;
  }

  .list h1 {
    font-weight: bold;
    font-size: 24px;
  }

  .ant-table-thead > tr > th, .ant-table-header {
    font-size: 16px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 19px;
    background: #fff !important;
  }

  .ant-table-tbody > tr > td {
    padding: 15px 44px;
    border: none;
    cursor: pointer;
    position: relative;
    background: #fff;
  }

  .community-introduction-list tr td:nth-child(2):hover .ant-image {
    display: flex;
  }

  .president-qrcode-list {
    margin: 0;
  }

  .president-qrcode-list tr td:nth-child(2):hover .ant-image {
    display: flex;
  }

  .awards-list tr td:nth-child(3):hover .ant-image {
    display: flex;
  }

  .user-list tr td:nth-child(3):hover .ant-image {
    display: flex;
  }

  .president-qrcode-list tr td:nth-child(2),
  .community-introduction-list tr td:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ant-table-tbody .ant-image {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 100;
    display: none;
    transition: all .2s;
    border-radius: 6px;
    overflow: hidden;
  }

  .community-introduction-list .ant-image {
    top: 50px;
  }

  .ant-table-tbody .ant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .president-qrcode-list .ant-image {
    bottom: 200px;
  }

  .list .ant-image {
    bottom: 50px;
    align-items: center;
    justify-content: center;
  }


  .ant-table {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    line-height: 19px;
    white-space: nowrap;
  }

  .list .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background: @selectColor;
  }

  .list .ant-checkbox-checked .ant-checkbox-inner {
    border-color: @selectColor;
    background: @selectColor;
  }

  .operation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 58px;
  }

  .operation span {
    font-weight: bold;
    font-size: 14px;
  }

  .operation span:first-child {
    color: #6777EF;
  }

  .operation span:last-child {
    color: #EB5757;
  }

  .edit-model {
    width: 332px !important;
    min-height: 286px;
    box-sizing: border-box;
  }

  .edit-model .ant-modal-body > section {
    width: 100%;
  }

  .edit-model .edit-model-header h1 {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    line-height: 38px;
    text-align: center;
    margin-bottom: 2px;
  }

  .edit-model .edit-model-header h2 {
    font-size: 14px;
    font-weight: bold;
    color: #D9D9D9;
    line-height: 14px;
    text-transform: uppercase;
    text-align: center;
  }

  .edit-model .edit-model-body {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-content: space-around;
  }

  .edit-model .edit-model-body input {
    width: 268px;
    height: 40px;
    background: rgba(207, 207, 207, 0.1);
    border-radius: 6px 6px 6px 6px;
  }

  .edit-model .edit-model-body p {
    color: #E0E0E0;
  }

  .edit-model .edit-model-body > span {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
  }

  .ant-upload.ant-upload-drag {
    background: #262626;
    border: none;
  }

  .ant-upload.ant-upload-drag .ant-upload {
    padding: 0;
  }

  .edit-model .edit-model-footer {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
  }

  .edit-model .edit-model-footer button {
    height: 36px;
    padding: 7px 18px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 22px;
    border: none;
    border-radius: 4px;
  }

  .edit-model .edit-model-footer button:first-child {
    background: #F2F3F5;
    color: #000;
  }

  .edit-model .edit-model-footer button:last-child {
    color: #fff;
    background: #6777EF;
  }

  .empty .ant-empty {
    display: none !important;
  }

  .empty .ant-table-placeholder {
    height: 100px;
  }

  textarea.ant-input {
    height: 100px;
  }

  .scroll-box {
    height: 693px;
    overflow: hidden scroll;
  }

  .scroll-box::-webkit-scrollbar {
    width: 10px;
  }

  //修改 滚动条的 下面 的 样式
  .scroll-box::-webkit-scrollbar-track {
    background-color: transparent;
  }

  //修改 滑块
  .scroll-box::-webkit-scrollbar-thumb {
    width: 5px !important;
    background-color: #bbbdbf;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
}
</style>
